<template>
  <div class="feedback-page">
    <el-card class="feedback-card">
      <!-- 搜索 & 筛选区 -->
      <div class="filter-bar">
        <el-input v-model="searchKeyword" placeholder="搜索姓名或邮箱" prefix-icon="el-icon-search" clearable
          class="filter-item" @input="handleSearch" />
        <!-- <el-select v-model="selectedAddress" placeholder="按地址筛选" clearable class="filter-item" @change="handleFilter">
          <el-option v-for="addr in uniqueAddresses" :key="addr" :label="addr" :value="addr" />
        </el-select> -->
      </div>

      <!-- 表格 -->
      <el-table :data="pageState.tableData">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="nick_name" label="姓名" width="120" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="tel_number" label="联系方式" width="150" />
        <el-table-column prop="address" label="联系地址" />
        <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-button size="small" type="primary" plain @click="openDialog(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination layout="prev, pager, next" :total="filteredList.length" :page-size="pageSize"
          @current-change="handlePageChange" :current-page="currentPage" />
      </div>
    </el-card>

    <!-- 弹窗详情 -->
    <el-dialog title="问题详情" v-model="dialogVisible" width="600px" class="feedback-dialog">
      <div class="problem-content">{{ selectedFeedback.problem }}</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, reactive, onMounted } from 'vue'

import { apiGetContactList } from '../api/contact'
import { myNotice } from '../utils/tools'

const allFeedback = ref([
  {
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '1234567890',
    address: '北京市朝阳区',
    problem: '系统登录后白屏，无法继续操作。'
  },
  {
    name: '李四',
    email: 'lisi@example.com',
    phone: '9876543210',
    address: '上海市浦东新区',
    problem: '注册页面验证码无法发送。'
  },
  {
    name: '王五',
    email: 'wangwu@example.com',
    phone: '1357924680',
    address: '北京市朝阳区',
    problem: '提交表单时报错，请检查。'
  },
  {
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '1234567890',
    address: '北京市朝阳区',
    problem: '系统登录后白屏，无法继续操作。'
  },
  {
    name: '李四',
    email: 'lisi@example.com',
    phone: '9876543210',
    address: '上海市浦东新区',
    problem: '注册页面验证码无法发送。'
  },
  {
    name: '王五',
    email: 'wangwu@example.com',
    phone: '1357924680',
    address: '北京市朝阳区',
    problem: '提交表单时报错，请检查。'
  },
  {
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '1234567890',
    address: '北京市朝阳区',
    problem: '系统登录后白屏，无法继续操作。'
  },
  {
    name: '李四',
    email: 'lisi@example.com',
    phone: '9876543210',
    address: '上海市浦东新区',
    problem: '注册页面验证码无法发送。'
  },
  {
    name: '王五',
    email: 'wangwu@example.com',
    phone: '1357924680',
    address: '北京市朝阳区',
    problem: '提交表单时报错，请检查。'
  },
  {
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '1234567890',
    address: '北京市朝阳区',
    problem: '系统登录后白屏，无法继续操作。'
  },
  {
    name: '李四',
    email: 'lisi@example.com',
    phone: '9876543210',
    address: '上海市浦东新区',
    problem: '注册页面验证码无法发送。'
  },
  {
    name: '王五',
    email: 'wangwu@example.com',
    phone: '1357924680',
    address: '北京市朝阳区',
    problem: '提交表单时报错，请检查。'
  },
  // ...其他数据保持不变
])

const searchKeyword = ref('')
const selectedAddress = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const dialogVisible = ref(false)
const selectedFeedback = ref({})

const filteredList = computed(() => {
  return allFeedback.value.filter(item => {
    const matchesKeyword =
      item.name.includes(searchKeyword.value) ||
      item.email.includes(searchKeyword.value)
    const matchesAddress = selectedAddress.value
      ? item.address === selectedAddress.value
      : true
    return matchesKeyword && matchesAddress
  })
})



const openDialog = (row) => {
  selectedFeedback.value = row
  dialogVisible.value = true
}

const handleSearch = () => {
  currentPage.value = 1
}

const handleFilter = () => {
  currentPage.value = 1
}

const handlePageChange = (page) => {
  currentPage.value = page
}




onMounted(async () => {
  pageState.tableData = await getContactList(pageState.queryParams)
  console.log('查询结果', await getContactList(pageState.queryParams))
})

const pageState = reactive({
  tableData: [],
  queryParams: {
    pageNo: 1,
    pageSize: 20,
  }
})

async function getContactList(params) {
  try {
    const resData = await apiGetContactList(params)
    if (!resData.code) throw Error(resData.msg)
    return resData.data
  }
  catch (error) {
    console.error('发生错误了喵！', error)
    myNotice('error', '查询错误', error)
    return []
  }

}
</script>

<style scoped>
.feedback-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.feedback-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 20px;
  background-color: #fff;
}

.filter-bar {
  display: flex;
  margin-bottom: 15px;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-item {
  width: 220px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.feedback-dialog :deep(.el-dialog) {
  border-radius: 8px;
  max-height: 80vh;
  overflow-y: auto;
}

.feedback-dialog .problem-content {
  font-size: 15px;
  color: #444;
  line-height: 1.8;
  white-space: pre-wrap;
  padding: 10px 0;
  max-height: 300px;
  overflow-y: auto;
}
</style>